import { toRefs, ref } from "vue"
import { useMapStore } from "../../store/useMap.js"
const { mapState } = toRefs(useMapStore())
import Query from "../../../zondy/lib/Query.js"
export const useQueryEvent = () => {
  const hideEventEle = ref(false)
  const eventService = { name: "traffic", layerId: 2 }
  const eventSource = new ol.source.Vector({})
  const evevtLayer = new ol.layer.Vector({
    source: eventSource,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        /* 填充色 */
        fill: new ol.style.Fill({
          color: "#f44336",
        }),
        /* 描边 */
        stroke: new ol.style.Stroke({
          color: "#d84315",
          width: 3,
        }),
      }),
    }),
  })
  let eventClose = null
  function queryEvent() {
    hideEventEle.value = true
    eventClose = new ol.Overlay({
      //要转换成overlay的HTML元素
      element: document.querySelector("#closeEvent"),
      //当前窗口可见
      autoPan: true,
      //Popup放置的位置
      positioning: "bottom-center",
      //是否应该停止事件传播到地图窗口
      stopEvent: true,
      autoPanAnimation: {
        //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
        duration: 250,
      },
    })
    mapState.value.map.addOverlay(eventClose)
    const position = [114.35814858111554, 30.492416378692724]
    eventClose.setPosition(position)
    mapState.value.map.addLayer(evevtLayer)
    Query.queryByLayer({ service: eventService, success: queryEventSuccess })
  }
  function queryEventSuccess(e) {
    var format = new Zondy.Format.PolygonJSON()
    /* 将mapgis要素json反序列化为ol.feature类型数组 */
    var features = format.read(e)
    /* 将查询到的要素添加到高亮图层中 */
    eventSource.addFeatures(features)

    mapState.value.map.on("click", ifEVentFeature)

    mapState.value.map.on("pointermove", eventMouseMove)
  }
  const ifEVentFeature = function (evt) {
    //判断当前单击处是否有要素，捕获到要素时弹出popup
    eventElements.value.forEach(item => {
      mapState.value.map.removeOverlay(item)
    })
    var feature = mapState.value.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
      return feature
    })
    if (feature) {
      createpopu()
      const msg = feature.values_.values_
      measureTooltipElement.innerHTML = `事件编号:${msg["事件编号"]}<br/>
        驾驶员:${msg["驾驶员"]}<br/>
        车牌号:${msg["车牌号"]}<br/>
        事件类型:${msg["事件类型"]}<br/>
        事件等级:${msg["事件等级"]}<br/>
        发生地点:${msg["发生地点"]}<br/>
        发生时间:${msg["发生时间"]}<br/>
        `
      measureTooltip.setPosition(evt.coordinate)
    }
  }
  const eventMouseMove = function (e) {
    var pixel = mapState.value.map.getEventPixel(e.originalEvent)
    var hit = mapState.value.map.hasFeatureAtPixel(pixel)
    mapState.value.map.getTargetElement().style.cursor = hit ? "pointer" : ""
  }
  let measureTooltipElement = null
  let measureTooltip = null
  let eventElements = ref([])
  function createpopu() {
    measureTooltipElement = document.createElement("div")
    measureTooltipElement.className = "tooltip tooltip-event"
    measureTooltip = new ol.Overlay({
      element: measureTooltipElement,
      offset: [0, -15],
      positioning: "bottom-center",
    })
    mapState.value.map.addOverlay(measureTooltip)
    eventElements.value.push(measureTooltip)
  }

  /**
   * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
   */

  //关闭事件查询函数
  function closeQueryEvent() {
    eventSource.clear()
    mapState.value.map.removeLayer(evevtLayer)
    eventElements.value.forEach(item => {
      mapState.value.map.removeOverlay(item)
    })
    eventClose.setPosition(undefined)
    mapState.value.map.un("click", ifEVentFeature)
    mapState.value.map.un("pointermove", eventMouseMove)
  }
  return { queryEvent, closeQueryEvent, hideEventEle }
}
